import React from 'react';
import { Card, Breadcrumb, Tag, Divider, Button, Space } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './NoticeDetail.module.less';

const NoticeDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  // 模拟通知详情数据
  const notice = {
    id,
    title: '示范区档案管理项目正式验收通知',
    type: '正式验收通知',
    status: '待处理',
    publishTime: '2024-03-20 10:30',
    publisher: '李四',
    content: `
      关于开展示范区档案管理项目正式验收工作的通知：
      
      一、验收时间
      正式验收时间：2024年5月1日 - 2024年5月15日
      
      二、验收内容
      1. 预验收问题整改情况核查
      2. 档案管理系统功能验收
      3. 档案数据质量检查
      4. 系统运维保障评估
      
      请相关人员做好准备工作。
    `,
    attachments: [
      { name: '正式验收标准.pdf', url: '#' },
      { name: '验收材料清单.docx', url: '#' }
    ]
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/formal-acceptance/notice">正式验收通知</Link>,
          },
          {
            title: '通知详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <h1 className={styles.title}>{notice.title}</h1>
          <div className={styles.meta}>
            <Tag color="orange">{notice.type}</Tag>
            <Tag color="processing">{notice.status}</Tag>
            <span>发布时间：{notice.publishTime}</span>
            <span>发布人：{notice.publisher}</span>
          </div>
        </div>
        <Divider />
        <div className={styles.content}>
          {notice.content.split('\n').map((paragraph, index) => (
            <p key={index}>{paragraph}</p>
          ))}
        </div>
        {notice.attachments.length > 0 && (
          <>
            <Divider />
            <div className={styles.attachments}>
              <h3>附件列表：</h3>
              <Space direction="vertical">
                {notice.attachments.map((file, index) => (
                  <Button key={index} type="link" href={file.url}>
                    {file.name}
                  </Button>
                ))}
              </Space>
            </div>
          </>
        )}
        <Divider />
        <div className={styles.footer}>
          <Space>
            <Button onClick={() => navigate(-1)}>返回</Button>
            <Button type="primary" onClick={() => navigate('/formal-acceptance')}>
              开始验收
            </Button>
          </Space>
        </div>
      </Card>
    </MainLayout>
  );
};

export default NoticeDetail; 